<!--header-->
<link rel="stylesheet" href="/ceca_two/css/costShareOne.css" />
<link rel="stylesheet" href="/ceca_two/css/costShareTwo.css" />
<!--# include virtual="/ceca_two/common/html/header.html"-->
<!--# include virtual="/ceca_two/modules/costnorm/base/costShare.html"-->
<style>
.AllshareTable .basementless .basementlessName span{
	float: left;
	height: 100%;
	
}
	.AllshareTable .basementless .basementlessName span:nth-child(1) {
		width: 100px;
	}
	.AllshareTable .basementless .basementlessName span:nth-child(2) {
		width: 350px;
	}
	.AllshareTable .basementless .basementlessName span:nth-child(3) {
		width: 500px;
	}
	.AllshareTable .basementless .basementlessName span:nth-child(4) {
		width: 150px;
	}
	.AllshareTable .basementless .basementlessName span:nth-child(5) {
		width: 50px;
	}
	.AllshareTable .basementless .basementlessName span:nth-child(6) {
		width: 50px;
	}
	.basementlessText{
		line-height: 52px;
	}
	.name1{
		width: 100px;
		line-height: 104px;
		text-align: center;
		min-height: 104px;
		display: table;
		float: left;
	}
	.name1 span{
		vertical-align:middle;
		  display:table-cell;
		  line-height: 20px;
	}
	.leve{
		width: 350px;
		float: left;
		height: 52px;
		border-left: 1px solid #E5E5E5;
		border-right: 1px solid #E5E5E5;
	}
	.leve .second,.leve .third,.leve .fouth{
		width: calc(348px/3);
		height: 100%;
		float: left;
		border-right: 1px solid #E5E5E5;
		position: relative;
	}
	.leve .fouth{
		border: none;
	}
	.leve .second .name,.leve .third .name,.leve .fouth .name{
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-indent: 2em;
	}
	.leve .second .list,.leve .third .list,.leve .fouth .list{
		width: 100%;
		position: absolute;
		left: -1px;
		top: 52.5px;
		display: none;
		z-index: 999;
		background: #fff;
		max-height: 240px;
		overflow-y: auto;
		border: 1px solid #FF3030;
	}
	.border{
		
	}
	.leve .second .list li,.leve .third .list li,.leve .fouth .list li{
		height: 53px;
		text-indent: 2em;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.leve .second .list li:hover,.leve .third .list li:hover,.leve .fouth .list li:hover{
		background: #FF3030;
		color: #fff;
	}
	.para{
		width: 250px;
		height: 100%;
		float: left;
		border-right: 1px solid #E5E5E5;
	}
	.para .name{
		width: 99px;
		text-align: center;
		height: 100%;
border-right: 1px solid #E5E5E5;
		float: left;
	}
	.para .inp{
		width: 100px;
		height: 100%;
border-right: 1px solid #E5E5E5;
		float: left;
		position: relative;
	}
	.para .inp input{
		width: 100%;

		padding-left: 15px;
		height: 100%;
		margin: 0;
		float: left;
		border: none;
	}
	.para .inp li{
		text-align: center;
	}
	.para .inp dl{
		width: 100%;
		position: absolute;
		display: none;
		top: 52px;
		z-index: 999;
		left: 0;
		background-color: red;
		color: #fff;
		text-align: center;
	}
	.para .inp dd{
		width: 100%;
		height: 52px;
		line-height: 52px;
		border-bottom: 1px solid #E5E5E5;
	}
	.para .danwei{
		width: 50px;
		text-indent: 0;text-align: center;
		height: 100%;
		float: left;
	}
	
	.eng{
		float: left;
		width: 150px;
		text-align: center;
		border-right: 1px solid #E5E5E5;
	}
	.eng .name{
		width: 50px;
		text-align: center;
		height: 100%;
		border-right: 1px solid #E5E5E5;
		float: left;
	}
	.eng .inp{
		width: 50px;
		height: 100%;
		float: left;border-right: 1px solid #E5E5E5;
	}
	.eng .inp input{
		width: 100%;
		
		padding-left: 15px;
		height: 100%;
		margin: 0;
		float: left;
		border: none;
	}
	.eng .danwei{
		width: 49px;
		height: 100%;
		float: left;
		background: url('/ceca_two/img/wang3.png')no-repeat 33px center;
		-webkit-background-size: 12px 12px;
		background-size: 12px 12px;
		
	}
	.eng .danwei li{
		text-align: left;
		text-indent: 0.5em;
	}
	.comp{
		width: 50px;
		height: 100%;
		float: left;
		border-right: 1px solid #E5E5E5;

	}
	.comp input{
		width: 100%;

		padding-left: 15px;
		height: 100%;
		margin: 0;
		float: left;
		border: none;
	}
	.oper{
		float: left;
		width: 49px;
		height: 100%;
		border-right: 1px solid #E5E5E5;
		position: relative;

	}
	.oper img{
		float: left;
		width: 24px;
		height: 24px;
		margin-top: 15px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		cursor: pointer;
	}
	
	.box{
		width: 1100px;
		float: right;
		height: 52px;
border-bottom: 1px solid #E5E5E5;


	}
	.danwei li{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.danwei dl{
		border: 1px solid #FF3030;
		z-index: 999;
		position: relative;
		display: none;
		max-height: 240px;
		overflow-y: auto;
		background: #fff;
	}
	.danwei dl dd:hover{
		background: #FF3030;
		color: #fff;
	}
	.zhhj{
		width: 116px;
		text-indent: 2em;
		float: left;
		border-right: 1px solid #E5E5E5;
	}
	.zhhjinput{
		float: left;
		width: 500px;
		height: 100%;
	}
	.zhhjinput input{
		width: 100%;
		height: 100%;
		font-size: 14px;
		background: none;
		border: none;
	}
	.hj{
		border-left: 1px solid #E5E5E5;
	}
	.basementlessText{
		font-size: 12px!important;
	}
	.basementlessText *{
		box-sizing: border-box;
	}
	.wang3{
		width: 12px;
		height: 12px;
		float: right;
		margin-top: 20px;
		margin-right: 15px;
	}
</style>
		<h1 class="shareName">工程特征</h1>
		<div class="explain">填写说明：以下内容均为必填项，若本项目无此项内容请填写“无”。</div>
		<ul class="projectList" id="secondList"></ul>
		<div class="AllshareTable">
			<dl class="basementless">
				<dt class="basementlessName">
					<span>建筑部位</span>
					<span>分部分项</span>
					<span>技术参数</span>
					<span>工程量</span>
					<span>综合合价（万元）</span>
					<span>操作</span>
				</dt>
			</dl>
		</div>
		<div class="shareCostBtn">
			<div class="saveBtn">
				<a  class="btnc">保存</a>
			</div>
			<div class="nextBtn">
				<a href="/ceca_two/modules/costnorm/costShareOne.html">上一步</a>
			</div>
			<div class="nextBtn">
				<a href="/ceca_two/modules/costnorm/building/costShareThree.html">下一步</a>
				
			</div>
		</div>
	</div>
</div>
<!--底部-->
<!--# include virtual="/ceca_two/common/html/footer.html"-->

</body>
</html>                              
<script type="text/javascript">
	var unit = [
		{"name":"面积","cou":"m²"},
		{"name":"体积","cou":"m³"},
		{"name":"体积/面积","cou":"m³/m²"}
	]

	
	
	$.ajax({
		type:"post",
		url:"/guidance_service/front/costIndex/template/get.do",
		data:{
			templateId:1502767515419000
		},success:function (data){
			
			var data = JSON.parse(data.data.templateContent);
			console.log(data)
			
			$("#secondList").append("<li class='projectListOne'>建筑装饰工程（无地下室）</li>");

			for (i = 0 ; i < data.length ; i++) {
				if (data[i].pId == 0) {
					var html = "<dd class='basementlessText'><div class='name1' data-id="+data[i].id+" title='"+data[i].name+"'><span>"+data[i].name+"</span></div>";
						html+="<div class= 'box' ><div class='leve'><div class='second' onclick='selList(this)'><ul class='name'>不包含 <img src='/ceca_two/img/wang3.png' class='wang3' /></ul><ul class='list'></ul></div>";
						//二级
						html+="<div class='third' onclick='selList(this)'></div>";
						//三级
						html+="<div class='fouth' onclick='selList(this)'></div></div>";
						//分部分项
						html+="<div class='para'><ul class='name' title=''></ul><ul class='inp'><input type='text' /></ul><ul class='danwei'></ul></div>";
						//技术参数1
						html+="<div class='para'><ul class='name' title=''></ul><ul class='inp'><input type='text' /></ul><ul class='danwei'></ul></div>";
						//技术参数2
						html+="<div class='eng'><ul class='name' title=''>面积</ul><ul class='inp'><input type='text' /></ul><ul class='danwei'><li onclick='selUnit(this)'>mm</li><dl></dl></ul></div>";
						//工程量
						html+="<div class='comp'><input type = 'text' class='price'/></div>";
						//综合合价
						html+="<div class='oper'><img src='/ceca_two/img/wang1.png' class='add1' onclick='add(this)'/></div></div>";
						//操作
						html+="<div class='box hj' style='background:#ccc'><li class='zhhj'>综合合价</li><li class='zhhjinput'><input type='text' /></li></div></dd>"
						//综合合价
//					<img src='/ceca_two/img/wang2.png'class='del1' onclick='del(this)' />
					$(".basementless").append(html);
					
				}
			}
			
			for (i = 0 ; i < $(".leve").length ; i++) {
				for (j = 0 ; j < data.length ; j++) {
					if ($(".name1").eq(i).attr("data-id") == data[j].pId) {
						$(".second").eq(i).find(".list").append("<li data-id="+data[j].id+" data-pid='"+data[j].pId+"' onclick='second(this)' title='"+data[j].name+"'>"+data[j].name+"</li>")
					}
				}			
			}

		},error:function (){
			alert(2)
		}
	});

function selUnit (modern){
	$(modern).next("dl").toggle();
	$(modern).next("dl").empty();
	for (i = 0 ; i < unit.length ; i++) {
		$(modern).next("dl").append("<dd onclick='choseUnit(this)'>"+unit[i].cou+"</dd>")
	}
	
}

function choseUnit (modern){
	var name = $(modern).html();
	var thisIndex = $(modern).index();
	$(modern).parent().prev().html(name)
	$(modern).parents(".eng").find(".name").html(unit[thisIndex].name);
	$(modern).parent("dl").hide();
}



function add (modern){
	var num = 0 ;
	var price = $(modern).parents(".basementlessText").find(".price");
	for (i = 0 ; i < price.length; i++) {
		 num += Number(price.eq(i).val());
	}
	$(modern).parents(".basementlessText").find(".zhhjinput").find("input").val(num)
	
	
	var copy = $(modern).parents(".box").clone();
	copy.find(".add1").replaceWith("<img src='/ceca_two/img/wang2.png'class='del1' onclick='del(this)' />");
	copy.find(".price").val("");
	copy.find(".second").find(".name").html("不包含 <img src='/ceca_two/img/wang3.png' class='wang3' />");
	copy.find(".third").html("");
	copy.find(".para").find(".name").html("");
	copy.find(".para").find(".inp").find("input").val("");
	copy.find(".para").find(".danwei").html("");
	copy.find(".comp").find("input").val("");
	$(modern).parents(".box").before(copy);
	
}

function del (modern){
	$(modern).parents(".box").remove();
}



function second (modern) {
	var name = $(modern).html();
	var now = $(modern).attr("data-id");
	var par = $(modern).attr("data-pid");
	$(modern).parent().prev(".name").attr({"data-id":now,"data-pid":par}).html(name+"<img src='/ceca_two/img/wang3.png' class='wang3' />");
	
	$.ajax({
		type:"post",
		url:"/guidance_service/front/costIndex/template/get.do",
		data:{
			templateId:1502767515419000
		},success:function (data){
			var data = JSON.parse(data.data.templateContent);
			var html = "";
			
			for (i = 0 ; i < data.length ; i++) {
				if (data[i].pId == now ) {
					html+="<li data-id="+data[i].id+" data-pid ='"+data[i].pId+"' onclick='third(this)'title='"+data[i].name+"' >"+data[i].name+"</li>"

				}else{
					$(modern).parents(".second").next(".third").empty();
					$(modern).parents(".second").nextAll(".fouth").empty();
				}
				if(data[i].id == now && data[i].para!=undefined){
					
					for (j = 0 ; j < data[i].para.length ; j++) {
						$(modern).parents(".leve").nextAll(".para").eq(j).find(".name").html(data[i].para[j].name);
						$(modern).parents(".leve").nextAll(".para").eq(j).find(".danwei").html(data[i].para[j].unit);
						if (data[i].para[j].children != undefined) {
							var opt = data[i].para[j].children;
							$(modern).parents(".leve").nextAll(".para").eq(j).find(".inp").empty();
							$(modern).parents(".leve").nextAll(".para").eq(j).find(".inp").append("<li onclick='para(this)'>"+
							opt[0]+"</li><dl class='list'></dl>")
							for (k = 0 ; k < opt.length ; k++) {

								$(modern).parents(".leve").nextAll(".para").eq(j).find(".inp").find("dl").append("<dd onclick='choseList(this)'>"+opt[k]+"</dd>")
							}
						}
					}
				}else if (data[i].id == now && data[i].para == undefined){
					$(modern).parents(".leve").nextAll(".para").find(".name").html("");
					$(modern).parents(".leve").nextAll(".para").find(".danwei").html("");
				}
			}
			if (html != "") {
				$(modern).parents(".second").next(".third").empty();
				$(modern).parents(".second").nextAll(".fouth").empty();
				$(modern).parents(".second").next(".third").append("<ul class='name' title=''>不包含<img src='/ceca_two/img/wang3.png' class='wang3' /></ul><ul class='list'>"+html+"</ul>");
			}
		},error:function (){
			alert(2)
		}
	});
}


function para(modern){
	$(modern).parent(".inp").find(".list").toggle();
}

function choseList(modern){
	var name = $(modern).html();
	$(modern).parents(".inp").find("li").html(name);
	$(modern).parents(".list").hide();
}




function selList(modern){
	$(modern).find(".list").toggle();
}

function third(modern){
	var name = $(modern).html();
	var now = $(modern).attr("data-id");
	var par = $(modern).attr("data-pid");
	
	$(modern).parent().prev(".name").attr({"data-id":now,"data-pid":par}).html(name+"<img src='/ceca_two/img/wang3.png' class='wang3' />");
	$.ajax({
		type:"post",
		url:"/guidance_service/front/costIndex/template/get.do",
		data:{
			templateId:1502767515419000
		},success:function (data){
			var data = JSON.parse(data.data.templateContent);
			var html = "";
			for (i = 0 ; i < data.length ; i++) {
				if (data[i].pId == now ) {
					html+="<li data-id="+data[i].id+" data-pid="+data[i].pId+" onclick='third(this)' title='"+data[i].name+"' >"+data[i].name+"</li>"
					
				}
				if(data[i].id == now && data[i].para!=undefined){

					for (j = 0 ; j < data[i].para.length ; j++) {
						$(modern).parents(".leve").nextAll(".para").eq(j).find(".name").html(data[i].para[j].name);
						$(modern).parents(".leve").nextAll(".para").eq(j).find(".danwei").html(data[i].para[j].unit);
					}
				}else if(data[i].id == now && data[i].para == undefined){
					$(modern).parents(".leve").nextAll(".para").find(".name").html("");
					$(modern).parents(".leve").nextAll(".para").find(".danwei").html("");
				}
			}
			if (html != "") {
				$(modern).parents(".third").next(".fouth").empty();

				$(modern).parents(".third").next(".fouth").append("<ul class='name'>不包含<img src='/ceca_two/img/wang3.png' class='wang3' /></ul><ul class='list'>"+html+"</ul>");
				
			}
		},error:function (){
			alert(2)
		}
	});
}
$(".btnc").on("click",function(){
	var arr = [];
	for (i = 0 ; i < $(".basementlessText").length ; i++) {
		var json = {
				name : $(".name1").eq(i).find("span").html(),
				id : $(".name1").eq(i).attr("data-id"),
				max : $(".basementlessText").eq(i).find(".zhhjinput").find("input").val()
			}
		arr.push(json)
		//父节点
		var one = $(".basementlessText").eq(i).find(".second").find(".name").html(),
			two = $(".basementlessText").eq(i).find(".third").find(".name").html(),
			thr = $(".basementlessText").eq(i).find(".fouth").find(".name").html();
			
			two == undefined ? two = "" : "";
			thr == undefined ? thr = "" : "";


		if ( one != "不包含" && (two == "" || two == "不包含")) {
			for (j = 0 ; j < $(".basementlessText").eq(i).find(".second").length ; j++) {
				var json ={
					name : $(".basementlessText").eq(i).find(".second").find(".name").eq(j).html(),
					id : $(".basementlessText").eq(i).find(".second").find(".name").eq(j).attr("data-id"),
					pId : $(".basementlessText").eq(i).find(".second").find(".name").eq(j).attr("data-pid"),
					children:[],
					eng:[
						{name:$(".basementlessText").eq(i).find(".eng").find(".name").html()},
						{num:$(".basementlessText").eq(i).find(".eng").find("input").val()},
						{unit:$(".basementlessText").eq(i).find(".eng").find("li").html()}
					],
					comp: $(".basementlessText").eq(i).find(".price").val(),
				}
				for (k = 0 ; k < $(".basementlessText").eq(i).find(".para").length ; k++) {
					if ($(".basementlessText").eq(i).find(".para").eq(k).find(".name").html() != "") {
						var jsonk ={
							name : $(".basementlessText").eq(i).find(".para").eq(k).find(".name").html(),
							num : $(".basementlessText").eq(i).find(".para").eq(k).find("input").val(),
							unit :$(".basementlessText").eq(i).find(".para").eq(k).find(".danwei").html()
						}
						json.children.push(jsonk)
					}
				}

				// 技术参数
				arr.push(json)
			}
			// 一级
		}else if (( two != "不包含" && two != ""  &&  thr == "") || ( two != "不包含" && two != ""  &&  thr == "不包含")){
			var json = {
				name : $(".basementlessText").eq(i).find(".second").find(".name").html(),
				id : $(".basementlessText").eq(i).find(".second").find(".name").attr("data-id"),
				pId : $(".basementlessText").eq(i).find(".second").find(".name").attr("data-pid"),
			}
			arr.push(json)
			for (j = 0 ; j < $(".basementlessText").eq(i).find(".third").length ; j++) {
				var json ={
					name : $(".basementlessText").eq(i).find(".third").find(".name").eq(j).html(),
					id : $(".basementlessText").eq(i).find(".third").find(".name").eq(j).attr("data-id"),
					pId : $(".basementlessText").eq(i).find(".third").find(".name").eq(j).attr("data-pid"),
					children:[],
					eng:[
						{name:$(".basementlessText").eq(i).find(".eng").find(".name").html()},
						{num:$(".basementlessText").eq(i).find(".eng").find("input").val()},
						{unit:$(".basementlessText").eq(i).find(".eng").find("li").html()}
					],
					comp: $(".basementlessText").eq(i).find(".price").val(),
				}
				
				for (k = 0 ; k < $(".basementlessText").eq(i).find(".para").length ; k++) {
					if ($(".basementlessText").eq(i).find(".para").eq(k).find(".name").html() != "") {
						var jsonk ={
							name : $(".basementlessText").eq(i).find(".para").eq(k).find(".name").html(),
							num : $(".basementlessText").eq(i).find(".para").eq(k).find("input").val(),
							unit :$(".basementlessText").eq(i).find(".para").eq(k).find(".danwei").html()
						}
						json.children.push(jsonk)
					}
				}
				arr.push(json)
			}
			
			// 二级
		}else if (thr != "" && thr != "不包含"){
			
			var json = {
				name : $(".basementlessText").eq(i).find(".second").find(".name").html(),
				id : $(".basementlessText").eq(i).find(".second").find(".name").attr("data-id"),
				pId : $(".basementlessText").eq(i).find(".second").find(".name").attr("data-pid"),
			}
			arr.push(json)
			var json = {
				name : $(".basementlessText").eq(i).find(".third").find(".name").html(),
				id : $(".basementlessText").eq(i).find(".third").find(".name").attr("data-id"),
				pId : $(".basementlessText").eq(i).find(".third").find(".name").attr("data-pid"),
			}
			arr.push(json)
			
			
			
			for (j = 0 ; j < $(".basementlessText").eq(i).find(".fouth").length ; j++) {
				var json ={
					name : $(".basementlessText").eq(i).find(".fouth").find(".name").eq(j).html(),
					id : $(".basementlessText").eq(i).find(".fouth").find(".name").eq(j).attr("data-id"),
					pId : $(".basementlessText").eq(i).find(".fouth").find(".name").eq(j).attr("data-pid"),
					children:[],
					eng:[
						{name:$(".basementlessText").eq(i).find(".eng").find(".name").html()},
						{num:$(".basementlessText").eq(i).find(".eng").find("input").val()},
						{unit:$(".basementlessText").eq(i).find(".eng").find("li").html()}
					],
					comp: $(".basementlessText").eq(i).find(".price").val(),
				}
				
				for (k = 0 ; k < $(".basementlessText").eq(i).find(".para").length ; k++) {
					if ($(".basementlessText").eq(i).find(".para").eq(k).find(".name").html() != "") {
						var jsonk ={
							name : $(".basementlessText").eq(i).find(".para").eq(k).find(".name").html(),
							num : $(".basementlessText").eq(i).find(".para").eq(k).find("input").val(),
							unit : $(".basementlessText").eq(i).find(".para").eq(k).find(".danwei").html()
						}
						json.children.push(jsonk)
					}
				}
				arr.push(json)
			}
			// 三级
		}
	
	}
	console.log(arr)
})




</script>
